<template>
	<view class="list ss-flex-row ss-row-between ss-col-top ss-m-t-16" >
		<view  class="img ss-m-l-10"  @click="itemClick" style="position:relative">
			<view class="tag" v-if="data.business_status=='ing'">营业中</view> 
			<view class="tag tag2" v-if="data.business_status=='close'">休息中</view>
			<image style="width:100%;height:100%" :src="sheep.$url.cdn(data?.thumb?.split(',')[0]||'')" mode="aspectFill"></image>
		</view>
		<view class="right ss-m-l-20" @click="itemClick">
			<view class="title ss-line-2">{{data.name}}</view>
			<view class="rate ss-m-t-12 ss-flex-row ss-row-left ss-col-center">
				<!-- 根据评分显示 -->
				<template v-if="bolidStar > 0"  v-for="i in bolidStar" :key="i" >
					<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202408301441592746.png" mode="aspectFill" class="selected ss-m-r-8"></image>
				</template>
				
				<template v-if="emptyStar>0" v-for="h in emptyStar" :key="h">
					<image   src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202408301441591230.png" mode="aspectFill" class="selected ss-m-r-8"></image>
				</template>
				<view style="color:#FBA503;">{{bolidStar.toFixed(1)}}</view>
				<!-- <view class="recommend ss-m-l-10 color_red">
					{{data.mark}}
					<text v-if="false">推荐</text>
				</view>
				<view class="ss-m-l-10 num" >
					<text v-if="data.comment_num && data.comment_num>0">{{data.comment_num}}条</text> <text v-if="data.per_pay && data.per_pay.length>0">{{data.per_pay}}/人</text>
				</view> -->
			</view>
			<!--优惠 -->
			<view class="ss-flex ss-m-t-4">
				<image style="width:32rpx;height:32rpx" :src="sheep.$url.cdn('/storage/sjrz/20250403/d8f90d6a3714565c18be1cda55acd2ec.png')" mode="aspectFill"></image>
				<view style="color:#9E9E9E" class="ss-m-l-10">优惠15%</view>
			</view>
			<view class="ss-flex ss-m-t-8" v-if=" data.distance && data.distance.raw_m">
				<uni-icons type="location" size="20"></uni-icons>
				<view class="dis ss-m-l-10" style="font-size:30rpx" >{{data.distance.format_distance}}</view>
			</view>
			<view class="address ss-flex-row ss-row-between ss-col-center ss-m-t-12">
				<view class="addr ss-line-1">{{data.address}}</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script setup>
	import {onMounted,reactive,ref,computed} from 'vue';
	
	import sheep from '@/sheep';
	import _ from 'lodash';
	
	const props = defineProps({
		data:{
			type:Object,
			 default:{},
		}
	})
	
	const emits = defineEmits(["itemClick"])
	
	
	//实心星星数量
	const bolidStar = computed(()=>{
		
		return parseInt(props.data.mark);
	
	})
	
	//计算空心
	const emptyStar = computed(()=>{
		
		if(Math.ceil(props.data.mark)==5){
			
			if(parseFloat(props.data.mark)<5){
				return 1;
			}else if(parseFloat(props.data.mark)==5){
				return 0;
			}
		}else{
			return 5-Math.ceil(props.data.mark);
		}
	})
	
	
	
	const removeTrailingZeros = (str)=>{
		return Number(String(parseFloat(str).toFixed(20)).replace(/\.?0*$/, ''));
	}
	
	
	const itemClick=()=>{
		emits("itemClick",{id:props.data.id});
	}
	
	
</script>

<style lang="scss" scoped>
	.goodsicon{
		background:#FBEEE6;
		color:#EE6B2B;
		height: 34rpx;
		width: 34rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 34rpx;
		border-radius: 4rpx;
	}
.tagList{
	width: 510rpx;
	box-sizing: border-box;
	overflow-x: scroll;
	overflow-y: none;
	margin: 10rpx 0;
	&>view{
		white-space: nowrap;
	}
	.tagList-item{
		display: inline-block;
		// color:#888;
		color:var(--ui-BG-5);
		// min-width: 120rpx;
		text-align: center;
		// background: #ddd;
		border: 2rpx solid var(--ui-BG-5);
		margin-top: 10rpx;
		line-height: 35rpx;	
		padding: 0 10rpx;
		margin-right: 15rpx;
		font-size: 20rpx;
		border-radius: 8rpx;
	}
}
.list{
		width:100%;
		font-family: Source Han Sans;
		.img{
			width:280rpx;
			height:280rpx;
			min-width: 280rpx;
			border-radius: 20rpx;
			overflow:hidden;
		}
		.right{
			flex:1;
			// height:180rpx;
			width: 500rpx;
			font-family: Source Han Sans;
			.title{
				width:379rpx;
				height:85rpx;
				line-height: 1.2em;
				font-size: 32rpx;
				font-weight: 600;
				color: #3D3D3D;
			}
			.rate{
				height:30rpx;
				.selected{
					width:30rpx;
					height:30rpx;
				}
				.recommend{
					font-size: 24rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
				}
				.num{
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.8);
				}
			}
			.address{
				height:30rpx;
				.addr{
					flex:1;
					height:30rpx;
					font-size: 24rpx;
					// width:420rpx;
					color: #95989e;
				}
				.dis{
					height:30rpx;
					min-width: 100rpx;
					font-size: 20rpx;
					display:flex;
					justify-content: center;
					align-items: center;
					
				}
			}
			.consume_collect{
				height:30rpx;
				font-size: 20rpx;
				letter-spacing: 1rpx;
				.consume{
					color:#FDAD00;
					border-radius: 10rpx;
					background: #FDF1D7;
					
				}
				.collect{
					color:#F75A5A;
					border-radius: 10rpx;
					background: #FADFDF;
					letter-spacing:1rpx;
					display:flex;
					justify-content:center;
					align-items:center;
				}
			}
			.goods{
				
			}
			.label{
				height:30rpx;
				.circle{
					height:30rpx;
					width: 30rpx;
					
					border-radius: 15rpx;;
				}
				.desc{
					font-size: 26rpx;
					color: #3D3D3D;
					
				}
			}
			.group{
				height:30rpx;
				// width:540rpx;
				.buy{
					width:30rpx;
					height:30rpx;
				}
				.original_price{
					white-space: nowrap;
					color: #888;
					font-size: 26rpx;
					font-weight: 200;
					text-decoration: line-through; /* 添加删除线 */
				}
				.goods-price{
					white-space: nowrap;
					font-size: 26rpx;
				}
				.goods-title{
					font-size: 26rpx;
					// width:410rpx;
				}
			}
		}
	}
	
	.color_red{
		color:#E82D2D
	}
	
	.color_3d{
		color:#3D3D3D;
	}
	
	.tag{
		width: 91rpx;
		height: 46rpx;
		line-height: 46rpx;
		border-radius: 0px 20rpx 0px 20rpx;
		background: #1D1D1D;
		font-size: 28rpx;
		color:#FFA726;
		text-align:center;
		position:absolute;
		top:0;
		right:0
	}
	.tag2{
		background: rgba(0, 0, 0, 0.5);
		color:#8E8E8E
	}
</style>
